window.onload = function () {
    searchChange();
    timeEffect();
    bannerEffect();
}
// 搜索栏颜色改变
function searchChange() {
    var banner = document.querySelector('.jd_banner')
    var bannerHeight = banner.offsetHeight;
    var search = document.querySelector('.jd_search')
    var opcity = 0;
    window.onscroll = function () {
        // 这句代码一定要写在函数里边的 因为这是一个变量  写在外边是执行一次的 所以一定要记着写在里边的 
        var scrollTop = document.body.scrollTop || document.documentElement.scrollTop;
        // console.log(scrollTop);  
        if (scrollTop < bannerHeight) {
            opcity = scrollTop / bannerHeight;
            search.style.backgroundColor = 'rgba(233, 35, 34, ' + opcity + ')';
        }
    }
}
// 倒计时
function timeEffect() {
    var left = document.querySelector('.jd_left')
    var spans = left.querySelectorAll('span')
    var totalTime = 780;

   timerId = setInterval(function () {
        totalTime--;
        if (totalTime < 0 ){
            clearInterval(timerId);
            return;
        }
        var hour = Math.floor(totalTime / 3600);
        var minute = Math.floor(totalTime % 3600 / 60);
        var second = Math.floor(totalTime % 60);
        spans[1].innerHTML = Math.floor(hour / 10);
        spans[2].innerHTML = Math.floor(hour % 10);
        spans[4].innerHTML = Math.floor(minute / 10);
        spans[5].innerHTML = Math.floor(minute % 10);
        spans[7].innerHTML = Math.floor(second / 10);
        spans[8].innerHTML = Math.floor(second % 10);
    }, 1000)
}

//  轮播图
function bannerEffect() {
    // 1.修改页面结构,增加第一张和最后一张图片
    var banner = document.querySelector('.jd_banner');
    var imgBox = banner.querySelector('ul:first-of-type');
    var first = imgBox.querySelector('li:first-of-type');
    var last = imgBox.querySelector('li:last-of-type');
    imgBox.appendChild(first.cloneNode(true));
    imgBox.insertBefore(last.cloneNode(true), first);
    // 2.设置对应的样式
    var lis = imgBox.querySelectorAll('li');
    var count = lis.length;
    var bannerWidth = banner.offsetWidth;
    imgBox.style.width = bannerWidth * count + 'px';
    for (var i = 0; i < lis.length; i++) {
        lis[i].style.width = bannerWidth + 'px';
    }

    // 3.设置偏移
    imgBox.style.left = -bannerWidth + 'px';
    // 页面新加载重新获取banner的值
    window.onresize = function () {
        bannerWidth = banner.offsetWidth;
        imgBox.style.width = bannerWidth * count + 'px';
        for (var i = 0; i < lis.length; i++) {
            lis[i].style.width = bannerWidth + 'px';
        }
        imgBox.style.left = -bannerWidth * count + 'px';
    }
    // 已经有一张图片移动过去了,目前显示的是索引为1的图片.
    var index = 1;
    var timerId;
    // 4.实现自动轮播
    var startTime = function () {
        timerId = setInterval(function () {
            // 变换索引
            index++;
            // 添加过渡效果
            imgBox.style.transition = 'left .5s ease-in-out';
            imgBox.style.left = (-bannerWidth * index) + 'px';
            // 如果是最后一张了
            setTimeout(function () {
                if (index == count - 1) {
                    index = 1;
                    imgBox.style.transition = 'none';
                    imgBox.style.left = (-bannerWidth * index) + 'px';
                }
            }, 500)
        }, 2000);
    }
    startTime();
    // 5.手动轮播
    var startX, moveX, distanceX;
    imgBox.addEventListener('touchstart', function (e) {
        clearInterval(timerId);
        startX = e.targetTouches[0].clientX
        console.log('111')
    })
    imgBox.addEventListener('touchmove', function (e) {
        moveX = e.targetTouches[0].clientX
        distanceX = moveX - startX;
        imgBox.style.transition = 'none';
        imgBox.style.left = (-index * bannerWidth + distanceX) + 'px';
        console.log('222')
    })
    imgBox.addEventListener('touchend', function () {
        if (Math.abs(distanceX) > 100) {
            if (distanceX > 0) {
                index--;
            } else {
                index++
            }
            imgBox.style.transition = 'left .5s ease-in-out';
            imgBox.style.left = (-bannerWidth * index) + 'px';
        } else if (Math.abs(distanceX) > 0) {
            imgBox.style.transition = 'left .5s ease-in-out';
            imgBox.style.left = (-bannerWidth * index) + 'px';
        }
        // 重新开启定时器
        startTime();
    })
    // 监听最后一张或者第一张时跳转
    imgBox.addEventListener('webkitTransitionEnd', function () {
        if (index == count - 1) {
            index = 1;
            imgBox.style.transition = 'none';
            imgBox.style.left = (-bannerWidth * index) + 'px';
        } else if (index == 0) {
            index = count - 2;
            imgBox.style.transition = 'none';
            imgBox.style.left = (-bannerWidth * index) + 'px';
        }
    })
}